<?php
mysql_connect('localhost','root','');
mysql_select_db('smartic');
$valCount = count($_POST['value']);
$value = $_POST['value']; 
$text = $_POST['text'];
$data = array();
if(count($value) > 0){
	foreach($value as $key=>$val){
		if(empty($val)){
			$data[$key] = $text[$key];
		}else{
			$data[$val] = $text[$key];
		}
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function getElement(elemID){
	var ID = false;
	if(document.getElementById){
		var ID = document.getElementById(elemID);
	}else if(document.all){
		var ID = document.all[elemID];
	}else if(document.getElementsByName){
		var ID = document.getElementsByName(elemID);
	}
	if(ID == false){alert("Can't get the element"); return false;}else{return ID;}
}
function changeDatatype(){
	var data = getElement('dataType').value;
	var arrayBut = getElement('pushBTN');
	var DataArray = getElement('DataArray');
	var DataBData = getElement('DataBData');
	if(data == 'array'){
		arrayBut.style.display = '';
		DataArray.style.display = '';
		DataBData.style.display = 'none';
	}else if(data == 'DBase'){
		arrayBut.style.display = 'none';
		DataArray.style.display = 'none';
		DataBData.style.display = '';
		//call ajax
		getData('table');
	}else{
		arrayBut.style.display = 'none';
		DataArray.style.display = 'none';
		DataBData.style.display = 'none';
	}
}
var i = 0;
function pushInAr() {
	i++;
	var ni = getElement('arrayData');
	var newdiv1 = document.createElement('div');
	newdiv1.setAttribute('id','Allbtnsi'+i);
	newdiv1.innerHTML = '<input name="value[]" type="text" class="values" /> => <input name="text[]" type="text" class="values" /> <input name="del" class="btns" type="button" value="DEL" onclick="deleteElem(\'Allbtnsi'+i+'\')" />';
	//appendChild
	ni.appendChild(newdiv1);
}
function deleteElem(elem){
	var delWh = getElement(elem);
	if(delWh){
		var olddiv = getElement(elem).parentNode;
		olddiv.removeChild(delWh);
	}
}
function createAjaxObj(){
	try{
		httprequest = false;
		if(window.XMLHttpRequest){//Firefox, Opera 8.0+, Safari
			httprequest = new XMLHttpRequest();
		}else if(window.ActiveXObject){//Internet Explorer		
			try{
				httprequest = new ActiveXObject("Msxml2.XMLHTTP");
			}catch (e){
				try{
					httprequest = new ActiveXObject("Microsoft.XMLHTTP");
				}catch(e){
					alert ("Your browser does not support AJAX!");
				}
			}
		}
	}catch(e){
		//alert ("Your browser does not support AJAX!");
	}
	return httprequest;
}
function is_array(mixed_var) {
	return (mixed_var instanceof Array);
}
httprequest = createAjaxObj();
function getData(pubwhat){
	if(httprequest.readyState != 0){
		httprequest.abort();
	}
	if(pubwhat == 'table'){
		var params = 'pubwhat='+pubwhat;
	}else if(pubwhat == 'columns'){
		var params = 'pubwhat='+pubwhat+'&Table='+getElement('datata').value;
		getElement('dataid').length = 0;
		getElement('datate').length = 0;
	}
	httprequest.open('POST','db_info.php',true);
	httprequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	httprequest.setRequestHeader("Content-length", params.length);
	httprequest.setRequestHeader("Connection", "close");
	httprequest.onreadystatechange = function(){
		if (httprequest.readyState == 4 && httprequest.status == 200){
			allData = eval(httprequest.responseText);
			disable(getElement('datata'),false);
			disable(getElement('dataid'),false);
			disable(getElement('datate'),false);
			if(pubwhat == 'table'){
				selected = getElement('datata').selectedIndex;
				if(is_array(allData)){
					for(i=0;i<allData.length;i++){
						getElement('datata').options[i] = new Option(allData[i],allData[i]);
					}
				}
				getElement('datata').selectedIndex = selected;
			}else if(pubwhat == 'columns'){
				if(is_array(allData)){
					for(i=0;i<allData.length;i++){
						getElement('dataid').options[i] = new Option(allData[i],allData[i]);
						getElement('datate').options[i] = new Option(allData[i],allData[i]);
					}
				}
			}
			getElement('DataBData').style.background = "";
		}else{
			disable(getElement('datata'),true);
			disable(getElement('dataid'),true);
			disable(getElement('datate'),true);
			getElement('DataBData').style.background = "url(loading.gif) no-repeat";
			getElement('DataBData').style.backgroundPosition = "100% 83.8%";
		}
	}
	httprequest.send(params);
}
function disable(elem,yes){
	if(yes == true){
		elem.disabled = true;
	}else{
		elem.disabled = false;
	}
}
</script>
<style type="text/css">
<!--
* {
	margin:0px;
	padding:0px;
}
#dataContainer {
	width: 361px;
	float: left;
	padding: 5px;
}
#dataContainer .dataFields {
	width: 31.6%;
	margin: 2px;
	float: left;
	text-align:center;
	border:#CCCCCC solid 1px;
	overflow: hidden;
	display: inline;
}
#dataContainer .dataFields p {
	color:#333333;
	font-size:10px;
	background-color: #F4FCFF;
}
#dataContainer .dataNaviga {
	margin-bottom: 10px;
}
.values {
	width:39.6%;
	font-size:10px;
}
.btns {
	font-size:10px;
}
-->
</style>
</head>
<body>
<div id="dataContainer">
  <div class="dataNaviga"> Choose Menu Data
    <select name="dataType" class="btns" id="dataType" onchange="changeDatatype()" onfocus="changeDatatype()" style="width:100%;">
      <option value="NULL" selected="selected">Choose From List</option>
      <option value="array">From Array</option>
      <option value="DBase">From DB</option>
    </select>
  </div>
  <div id="DataArray" style="display:none;">
    <div id="arrayData">
      <?php
        foreach($data as $key=>$val){$data[$val] = $text[$key];
        echo '<div id="Allbtnsi'.$key.'" class="brackes"><input name="value[]" type="text" class="values" value="'.$key.'" /> => <input name="text[]" type="text" class="values" value="'.$val.'" /> <input name="del" type="button" value="-" class="btns" onclick="deleteElem(\'Allbtnsi'.$key.'\')" /></div>';
        }
        ?>
    </div>
    <input name="pushBTN" id="pushBTN" type="button" value="Create" class="btns" onclick="pushInAr()"/>
  </div>
  <div id="DataBData" style="display:none;">
    <div class="dataFields">
      <p>Table</p>
      <select name="datata" id="datata" size="6" style="width:100%;" onchange="getData('columns')">
      </select>
    </div>
    <div class="dataFields">
      <p>Value</p>
      <select name="dataid" id="dataid" size="6" style="width:100%;">
      </select>
    </div>
    <div class="dataFields">
      <p>Text</p>
      <select name="datate" id="datate" size="6" style="width:100%;">
      </select>
    </div>
    MYSQL Condition
    <input name="dataco" style="width:100%;" type="text" />
  </div>
</div>
</body>
</html>
